<template>
	<div>
		<div class="container">
			<a-form ref="formRef" :model="formState" v-bind="{labelCol: {style: {width: '100px'}}, wrapperCol: {span: 8}}" @finish="saveConfig">
				<a-tabs>
					<a-tab-pane key="1" tab="基本信息">
						<a-form-item label="系统名称" name="app_name" :rules="{required:true, message:'请输入名称'}">
							<a-input v-model:value="formState.app_name" />
						</a-form-item>
						<a-form-item label="集团名称" name="group_name" :rules="{required:true, message:'请输入名称'}">
							<a-input v-model:value="formState.group_name" />
						</a-form-item>

						<a-form-item label="LOGO" name="logo">
							<upload v-model:value="formState.logo" />
						</a-form-item>

						<a-form-item label="行业" name="industry" :wrapper-col="{span: 16}">
							<a-cascader v-model:value="formState.industry" :check-strictly="true" :options="industryOptions" :load-data="loadIndustryData" placeholder="请选择区域" change-on-select />
						</a-form-item>
					</a-tab-pane>

					<a-tab-pane key="2" tab="隐私条款">
						<a-form-item label="隐私条款" name="privacy" :wrapper-col="{span: 24}">
							<a-editor v-model:value="formState.privacy" @upload-image="uploadImage" />
						</a-form-item>
					</a-tab-pane>

					<a-tab-pane key="3" tab="服务条款">
						<a-form-item label="服务条款" name="term" :wrapper-col="{span: 24}">
							<a-editor v-model:value="formState.term" @upload-image="uploadImage" />
						</a-form-item>
					</a-tab-pane>

					<a-tab-pane key="4" tab="操作帮助">
						<a-form-item label="操作帮助" name="help" :wrapper-col="{span: 24}">
							<a-editor v-model:value="formState.help" @upload-image="uploadImage" />
						</a-form-item>
					</a-tab-pane>
				</a-tabs>

				<a-form-item :wrapper-col="{style: {marginLeft: '100px'}}">
					<a-button type="primary" html-type="submit">
						<save-outlined />提交
					</a-button>
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { post } from "../utils";
import { Upload, AEditor } from "../components";
import { SaveOutlined } from "@ant-design/icons-vue";

const { proxy } = getCurrentInstance();

const formRef = ref();
const formState = ref({});

const getCascaderTree = async (ids, fn) => {
	if (ids.length === 0) return await fn(0);

	ids = [0, ...ids];
	ids.pop();

	const nodes = [];
	for (const id of ids) {
		nodes[id] = await fn(id);
	}

	ids = ids.reverse();
	for (const i in ids) {
		if (i === "0") continue;

		nodes[ids[i]].find(d => d.value === ids[i - 1]).children = nodes[ids[i - 1]];
	}

	return nodes[0];
};

onMounted(async () => {
	const data = await post("config");
	data.industry = JSON.parse(data.industry).map(d => d.value);

	getCascaderTree([...data.industry], getIndustry).then(data => {
		industryOptions.value = data;
	});

	formState.value = data || {};
});

const getIndustry = async parentId => {
	return await post("industry/cascader", { parent_id: parentId });
};

const industryOptions = ref([]);

/*
getIndustry(0).then(data => {
	industryOptions.value = data;
});
*/

const loadIndustryData = options => {
	const option = options[options.length - 1];
	option.loading = true;

	return getIndustry(option.value).then(data => {
		option.loading = false;
		option.children = data;

		industryOptions.value = [...industryOptions.value];
	});
};

const getCascaderData = (tree, values, data = []) => {
	if (!Object.keys(tree).length || !(values instanceof Array) || values.length === 0) return data;

	const value = values.shift();
	const node = tree.find(d => d.value === value);
	if (node === false) return data;

	data.push({
		label: node.label,
		value: node.value
	});

	//遍历到最后一个value后返回所有data
	if (values.length === 0) return data;

	return getCascaderData(node?.children || {}, values, data);
};

const saveConfig = () => {
	const params = { ...formState.value };

	params.industry = JSON.stringify(getCascaderData(industryOptions.value, [...(params.industry || [])]));

	post("config/save", params)
		.then(data => {
			proxy.$message.success("信息更新成功");
			formState.value.id = data.id;
		})
		.catch(err => {
			proxy.$message.error(err);
		});
};

const uploadImage = (file, insertFn) => {};
</script>

<style scoped lang="scss">
.container {
	background: #fff;
	padding: 12px;
}
</style>
